<template>
    <section class="home-wrapper">
        <section class="home-navbar mt-50 mb-10">
            <img src="/@/assets/logo.png" style="width: 300px;" alt="">
            <section class="flex-wrapper mt-20">
                <h3 class="primary-color mr-8">引进人才</h3>
                <el-icon size="14" ><ArrowRight/></el-icon>
                <h3 class="primary-color ml-8">业务办理详情</h3>
            </section>
        </section>
        <el-card style="width: 1100px" shadow="always" body-class="custome-body-style">
            <template #header>
                <div class="card-header flex-wrapper">
                    <h3 >业务办理详情展示</h3>
                    <section class="flex-wrapper c-pointer" @click="back">
                       <el-button type="primary">返回上一级</el-button>
                    </section>
                </div>
            </template>
            <section>
                <p>
                    <el-link type="danger" underline="never">说明：所有信息均为业务申请时刻所记录的数据</el-link>
                </p>
                <section class="flex-wrapper card-header mt-20 user-info-wrapper" >
                    <section class="user-info" >
                        <section class="flex-wrapper card-header">
                            <p><span class="lable-txt">姓名：</span><span>{{ userInfo.talentName }}</span></p>
                            <p><span class="lable-txt">性别：</span><span>{{ userInfo.gender }}</span></p>
                        </section>
                        <section class="flex-wrapper card-header">
                            <p><span class="lable-txt">联系电话：</span><span>{{ userInfo.talentPhone }}</span></p>
                            <p><span class="lable-txt">民族：</span><span>{{ userInfo.ethnicity }}</span></p>
                        </section>
                        <section class="flex-wrapper card-header">
                            <p><span class="lable-txt">政治面貌：</span><span>{{ userInfo.politicalStatus }}</span></p>
                            <p><span class="lable-txt">婚姻状况：</span><span>{{ userInfo.maritalStatus }}</span></p>
                        </section>
                        <p><span class="lable-txt">证件类型：</span><span>{{ userInfo.idType }}</span></p>
                        <p><span class="lable-txt">证件号码：</span><span>{{ userInfo.idNumber }}</span></p>
                        <p><span class="lable-txt">户籍所在地：</span><span>{{ userInfo.domicileAddress }}</span></p>
                        <p><span class="lable-txt">现居地址：</span><span>{{ userInfo.currentResidenceAddress }}</span></p>
                    </section>
                    <section class="mr-100">
                        <img :src="loginMain" width="150" alt="">
                    </section>
                </section>


                <section class="mt-20 user-info-wrapper" >
                    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                        <el-tab-pane label="教育信息" name="teach"><TeachView /></el-tab-pane>
                        <el-tab-pane label="学习经历" name="study"><StudyView /></el-tab-pane>
                        <el-tab-pane label="工作经历" name="work"><WorkView /></el-tab-pane>
                        <el-tab-pane label="子女信息" name="child"><ChildView /></el-tab-pane>
                        <el-tab-pane label="留学信息" name="studyAbroad"><StudyAbroad /></el-tab-pane>
                        <el-tab-pane label="电子附件" name="attachment"><Attachment /></el-tab-pane>
                    </el-tabs>
                </section>
            </section>
        </el-card>
    </section>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { ref, onMounted, getCurrentInstance } from 'vue'
import { useRouter } from 'vue-router'
import { useCrmTalentApi } from '/@/api/system/talent';
import loginMain from '/@/assets/page-bj.png';
import type { TabsPaneContext } from 'element-plus'

import TeachView from './components/Teach.vue'
import StudyView from './components/Study.vue'
import WorkView from './components/Work.vue'
import ChildView from './components/Child.vue'
import StudyAbroad from './components/StudyAbroad.vue'
import Attachment from './components/Attachment.vue'


const useCrmTalent = useCrmTalentApi();
const router = useRouter()
const activeName = ref('teach')
const userInfo = ref<any>({})

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
const back = () => router.back();


onMounted(() => {
    getTalentDetailList()
})

const getTalentDetailList = async () => {
    useCrmTalent.getCrmTalentDetailById(1).then(res => {
        userInfo.value = res as any
        console.log(res);
    })
}

</script>

<style scoped>
.flex-wrapper{
    display: flex;
    align-items: center;
}
.home-wrapper{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}
.home-navbar{
    width: 1100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.card-header{
    justify-content: space-between; 
}
.user-info-wrapper{
    background-color: #fff; 
    padding: 10px; 
    border-radius: 10px;
    align-items: flex-start;
}
.user-info{
    width: 400px;
    p{
        padding: 8px 0;
        font-size: 14px;
        .lable-txt{
            font-weight: 700;
        }
    }
}


</style>